<script>
import requestUtil from "@/utils/RequestUtil";

export default {
  name: "createOrder",
  data() {
    return {
      entry: 0,
      address: {
        name: '',
        phone: '',
        province: '',
        region: '',
        detailAddress: ''
      },
      ids: (this.$route.query.ids),
      product: [
        {
          pic: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20221104/xiaomi_12_pro_01.jpg',
          name: '小米12 Pro 天玑版 天玑9000+处理器 5000万疾速影像 2K超视感屏 120Hz高刷 67W快充',
          type:'颜色:黑色;容量:128G;',
          promotion: '满减优惠：满2000.00元，减200.00元',
          price: '2999',
          num: 1
        },
        {
          pic: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20221104/redmi_k50_01.jpg',
          name: 'Redmi K50 天玑8100 2K柔性直屏 OIS光学防抖 67W快充 5500mAh大电量',
          type:'颜色:墨羽;容量:128G;',
          promotion: '无优惠',
          price: '2099',
          num: 1
        },
      ],
      integral: 0
    }
  },
  methods: {
    init() {
      if (!this.$store.state.userInfo) {
        this.$router.back()
        return
      }
      if (this.entry) {
        if (this.$route.params.address) {
          this.address = this.$route.params.address
        }
        return;
      }
      this.entry=1
      requestUtil({
        url: 'http://47.115.208.111:8080/user/address',
        method: "get",
        headers: {
          token: this.$store.state.userInfo.token
        }
      }).then(res => {
        if (res.data.code === 1) {
          this.address = (res.data.data).filter(item => item.defaultStatus === "true")[0]
        }
      })
    },
    onSubmit() {

    }
  },
  activated() {
    this.init()
  },
}
</script>

<template>
  <keep-alive>
    <div style="padding-bottom: 58px;background-color: #f8f8f8">
      <div @click="$router.push({name: 'addressList',query: {source: '1'},params: {...$route.query}})" class="address-card" style="display: flex;justify-content: space-between;align-items: center;padding: 15px 12px;background-color: white;position: relative">
        <div style="display: flex;align-items: center">
          <van-icon name="location-o" color="#888" size="22"/>
          <div style="display: flex;flex-direction: column;margin-left: 10px">
            <div>
              <span>{{address.name}}</span>
              <span style="font-size: 15px;vertical-align: bottom;padding-left: 8px">{{address.phone}}</span>
            </div>
            <div>
              <p style="margin-top: 8px;font-size: 14px;color: #909399;">{{address.province}} {{address.region}}</p>
              <p style="font-size: 14px;color: #909399;">{{address.detailAddress}}</p>
            </div>
          </div>
        </div>
        <van-icon name="arrow" color="#888" size="22"/>
      </div>
      <div style="background-color: white;margin-top: 8px;padding-bottom: 1px">
        <p style="padding: 10px 18px;color: #606266;font-size: 15px;">
          商品信息
        </p>
        <van-divider :style="{margin: 0}" />
        <div style="margin: 10px 15px;display: flex;" v-for="item in product" :key="item.name + item.type">
          <img :src="item.pic" style="width: 75px;height: 75px;object-fit: contain">
          <div style="flex: 1;padding-left: 12px;overflow: hidden;">
            <div style="font-size: 15px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden">
              {{item.name}}
            </div>
            <div style="font-size: 13px;color: #909399;text-overflow: ellipsis;white-space: nowrap;overflow: hidden">{{item.type}}</div>
            <div style="font-size: 12px;color: #fa436a;text-overflow: ellipsis;overflow: hidden;white-space: nowrap">{{item.promotion}}</div>
            <span style="font-size: 16px;padding-top: 5px;line-height: 30px">￥{{item.price}}</span>
            <span style="font-size: 12px;color: #606266"> x {{item.num}}</span>
          </div>
        </div>
      </div>
      <van-cell title="优惠券" style="margin-top: 8px">
        <template #default>
          优惠券
        </template>
      </van-cell>
      <van-cell title="积分抵扣">
        <template #default>
          <van-field
              :style="{padding: 0}"
              v-model="integral"
              input-align="right"
          />
        </template>
      </van-cell>
      <van-cell title="商品合计" style="margin-top: 8px">
        <template #default>
          ￥5098
        </template>
      </van-cell>
      <van-cell title="运费">
        <template #default>
          0
        </template>
      </van-cell>
      <van-cell title="活动优惠">
        <template #default>
          0
        </template>
      </van-cell>
      <van-cell title="优惠券">
        <template #default>
          0
        </template>
      </van-cell>
      <van-cell title="积分抵扣">
        <template #default>
          0
        </template>
      </van-cell>
      <van-cell title="备注">
        <template #default>
          <van-field
              :style="{padding: 0}"
              v-model="integral"
              input-align="right"
          />
        </template>
      </van-cell>
      <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
    </div>
  </keep-alive>
</template>

<style scoped>
.address-card:before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
  background-size: 80px;
  content: '';
}
</style>